<template>
  <div id="app">
    <!-- 动态组件 -->
    <component :is="zjArr[currentIndex]"></component>
    <div class="tabbar">
      <span
        @click="currentIndex = index"
        :class="{ active: currentIndex == index }"
        v-for="(item, index) in changeArr"
        :key="index"
        >{{ item }}</span
      >
    </div>
  </div>
</template>

<script>
//1.导入四个组件
import Index from "./components/Index.vue";
import Tuan from "./components/Tuan.vue";
import Order from "./components/Order.vue";
import My from "./components/My.vue";

export default {
  data() {
    return {
      currentIndex: 0,
      changeArr: ["首页", "爆爆团", "订单", "我的"],
      zjArr: [Index, Tuan, Order, My],
    };
  },
  components: {
    Index,
  },
};
</script>

<style lang="scss">
* {
  margin: 0;
  padding: 0;
}
#app .tabbar {
  width: 100%;
  position: fixed;
  bottom: 0;
  height: 40px;
  border-top: 1px solid #666;
  display: flex;
  justify-content: space-around;
  line-height: 40px;
  background: #f5f5f5;
}
.tabbar .active {
  color: skyblue;
}
</style>
